<div class="container-fluid">
  <app-page-title title="Checklists" [breadcrumbItems]="breadCrumbItems"></app-page-title>
  <div class="knowledgebase-tabs">
    <div class="row">
      <div class="col-lg-2">
        <ul ngbNav #nav="ngbNav" [activeId]="catSelector" class="nav-pills flex-column">
          <li *ngFor="let item of categoryData.items" [ngbNavItem]="item.id">
            <a ngbNavLink (click)="setCategorySelectorId(item.id)">
              <i class="{{item.icon}} font-size-22 d-block check-nav-icon mt-4 mb-3"></i>
              <p joyrideStep="catChecklistContent" title="Checklist type switcher" [stepContent]="catChecklistContent" class="font-weight-bold mb-4">{{item.name}}</p>
            </a>
            <ng-template ngbNavContent>
              <!-- Content Body -->
                <div class="card">
                  <div class="card-body">
                    <div class="row mb-5">
                      <div class="col-7">
                        <div class="search-box mb-2 d-inline-block">
                          <div class="position-relative">
                            <input class="form-control" [(ngModel)]="queryString" id="search" name="search"
                              placeholder="Search Checklist" />
                            <i class="bx bx-search-alt search-icon"></i>
                          </div>
                        </div>
                      </div>
                      <div class="col-5">
                        <div class="float-right" joyrideStep="addChecklistContent" title="Add new checklist category" [stepContent]="addChecklistContent">
                          <button *ngIf="priv.includes('manage')" routerLink="/checklists/checklist-type-create"
                          class="btn btn-primary mb-2">Add New</button>
                        </div>
                      </div>
                      <!-- end col-->
                    </div>
                    <div class="row">
                      <!-- Load Spinner -->
                      <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
                        <p class="loading">Loading, Please Wait...</p>
                      </ngx-spinner>
                      <div *ngFor="let item of checklistData.items | stringfilter:queryString; let i = index"
                        class="col-xl-12 mb-3 d-flex card border shadow-sm">
                        <div class="card-body pb-0">
                          <div *ngIf="loggedIn()" class="float-right">
                            <div *ngIf="priv.includes('manage')" class="dropdown float-right" ngbDropdown placement="bottom-right">
                              <a href="javascript: void(0);" class="dropdown-toggle card-drop" data-toggle="dropdown"
                                ngbDropdownToggle aria-expanded="false">
                                <i class="mdi mdi-dots-vertical font-size-18"></i>
                              </a>
                              <ul class="dropdown-menu dropdown-menu-right" ngbDropdownMenu>
                                <li>
                                  <a class="dropdown-item" type="button" [routerLink]="['/checklists/checklist-type-update', item.id]">
                                    <i class="fas fa-pencil-alt text-success mr-1"></i>Update</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" type="button" (click)="showModal(deletechecklistTypeModal)">
                                    <i class="fas fa-trash-alt text-danger mr-1"></i>Delete</a>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="media" joyrideStep="topicsChecklistContent" title="Checklist categories" [stepContent]="topicsChecklistContent">
                            <div class="media-body overflow-hidden">
                              <h5 class="text-truncate font-size-15">
                                <a [routerLink]="['/checklists/read', item.id]" class="text">{{item.title}}</a>
                              </h5>
                              <p class="text-muted pt-2">{{item.description}}</p>
                            </div>
                          </div>
                        </div>
                        <div class="px-4 py-3 border-top">
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item float-left mt-1">
                              <p class="mb-0">Active: {{item.visibility}}</p>
                            </li>
                            <li class="list-inline-item float-right">
                              <a [routerLink]="['/checklists/read', item.id]"><button type="button"
                                  class="btn-sm btn-primary d-none d-sm-block"
                                  joyrideStep="viewChecklistContent" title="Inspect checklist category" [stepContent]="viewChecklistContent">
                                  Inspect checklist</button></a>
                              <a [routerLink]="['/checklists/read', item.id]" type="button"
                                  class="btn-sm btn-primary text-center d-sm-none"><i class='bx bx-search-alt'></i></a>
                            </li>
                            <li *ngIf="priv.includes('manage')" class="list-inline-item float-right">
                              <a [routerLink]="['/checklists/manage', item.id]"><button type="button"
                                  class="btn-sm btn-primary d-none d-sm-block mr-2"
                                  joyrideStep="manageChecklistContent" title="Manage checklist category" [stepContent]="manageChecklistContent">
                                  Manage checklist</button></a>
                              <a [routerLink]="['/checklists/manage', item.id]" type="button"
                                  class="btn-sm btn-primary text-center d-sm-none mr-2"><i class="bx bx-cog-outline"></i></a>
                            </li>
                          </ul>
                        </div>
                        <!-- Project Delete Modal -->
                        <ng-template #deletechecklistTypeModal let-modal>
                          <div class="modal-header">
                            <h5 class="modal-title mt-0">Delete Project</h5>
                            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close click')">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <form>
                              <div class="form-group">
                                <label for="delete">Type <b class="text-danger">DELETE</b> to delete the Project
                                  item</label>
                                <input autocomplete="off" [(ngModel)]="delete" type="text" class="form-control" id="delete"
                                  name="delete" placeholder="Type DELETE" onfocus="this.placeholder = ''"
                                  onblur="this.placeholder = 'Type DELETE'">
                              </div>
                              <button (click)="deleteChecklistType(item.id);modal.dismiss('Close click')" type="submit"
                                class="btn btn-primary">Delete</button>
                            </form>
                          </div>
                        </ng-template>
                        <!-- END Project Delete Modal -->
                      </div>
                    </div>
                  </div>
                </div>
              <!-- Content Body Ends-->
            </ng-template>
          </li>
        </ul>
      </div>
      <div class="col-lg-10">
        <div [ngbNavOutlet]="nav"></div>
      </div>
    </div>
  </div>
</div>

<ng-template #catChecklistContent>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can select the different checklists that will be used to display the specific security categories in this context.</h6>
    </div>
  </div>
</ng-template>

<ng-template #topicsChecklistContent>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can select the different checklist categories and view, manage and inspect them.</h6>
    </div>
  </div>
</ng-template>

<ng-template #addChecklistContent>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can select the different checklist categories that will be used to display the specific code examples for this context.</h6>
    </div>
  </div>
</ng-template>

<ng-template #viewChecklistContent>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can view all the security controls / security requirements that belongs to this checklist category.</h6>
    </div>
  </div>
</ng-template>

<ng-template #manageChecklistContent>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can manage the security controls / security requirements that belongs to this checklist category and configure the SKF Wizard.</h6>
    </div>
  </div>
</ng-template>